<template>
	<div class="admin-auto-view" v-if="viewModel">
		<div class="auto-view_top" v-if="viewModel.topValue&&topValue">
			<div class="view_top-title">{{viewModel.topValue.value}}</div>
			<div class="view_top-intro">{{viewModel.topValue.key}}</div>
		</div>
		<ul class="auto-view_ul">
			<li class="auto-view_li" v-for="(item,index) in viewModel.items" :key="index">
				<div class="view_li-left">{{item.key}}</div>
				<div class="view_li-right">
					<div class="right-title">
						<x-enum v-if="item.type==='enum'" :type="item.parameter" :value="item.value"></x-enum>
						<x-label v-else-if="item.type  === 'label'" :color='item.parameter'>{{item.value}}</x-label>
						<div v-else-if="item.type === 'grade'">
							<x-grade :id="item.value" v-model="item.value"></x-grade>
						</div>
						<div v-else-if="item.type  === 'bool'">
							<x-label :color="item.value?'success':'danger'">{{item.value?'是':'否'}}</x-label>
						</div>
						<x-preview-image v-else-if="item.type==='image'" :images="item.value"></x-preview-image>
						<x-autoconfig v-else-if="item.type==='autoconfig'" v-model="item.value" :type="item.parameter"></x-autoconfig>
						<x-code v-else-if="item.type  === 'code' || item.type.substr(0, 4) === 'code'">{{item.value}}</x-code>
						<div class="right-title-nomarl" v-else>{{item.value}}</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	import ala from 'ala'
	export default {
		props: {
			viewModel: {},
			topValue: {
				default: true
			}
		}
	}
</script>
<style lang="scss">
	@import './var.scss';
</style>